<template>
  <div class="success">
    <Header :current_page="current_page"/>
    <div class="main">
        <div class="title">
          <img src="../../static/image/avatar1.svg" alt="">
          <div class="success-tips">
              <p class="tips1">您已成功购买 {{res_data.course_name.length}} 门课程！</p>
              <p class="tips2">你还可以加入QQ群 <span>747556033</span> 学习交流</p>
          </div>
        </div>
        <div class="order-info">
            <p class="info1"><b>付款时间：</b><span>{{res_data.pay_time}}</span></p>
            <p class="info2"><b>付款金额：</b><span >{{res_data.total_price}}</span></p>
            <p class="info3"><b>课程信息：</b><span v-for="(value,indx) in res_data.course_name"><span>《{{value}}》 </span></span></p>
        </div>
        <div class="wechat-code">
          <img src="../../static/image/img.png" alt="" class="er">
          <p><img src="../../static/image/img.png" alt="">重要！微信扫码关注获得学习通知&amp;课程更新提醒！否则将严重影响学习进度和课程体验！</p>
        </div>
        <div class="study">
          <span>立即学习</span>
        </div>
    </div>
    <Footer/>
  </div>
</template>

<script>
  import Header from "./common/Header"
  import Footer from "./common/Footer"
  export default{
    name:"Success",
    data(){
      return {
        current_page:0,
        res_data:{},
      };

    },

    created() {
      let p = location.search;
      let token = sessionStorage.token || localStorage.token;
      // let p = '?charset=utf-8&out_trade_no=2021010711491881&method=alipay.trade.page.pay.return&total_amount=1329.40&sign=LUVCQ6FZEzZFuC1ZRXug5yjfSs7o5x02N%2BKf90NGwugmd9bGoPwhEi1tFIkld83U97rXv9jmtcsgF7UIIjhjgiYL4cIENeyTcR2b%2BIqtzn2a1gvUvY5XY1OClvv6cc3%2BAWwjBpzRae0jALT5LWL32%2FnogLS1rCJmTRSdw3msw5BCvWdZhQapRyz4T0cL1nC2FmQB%2FUkPMJtcZptQ%2Fwv517hEQQHXkHPqQSoSUcXyQPL9ZGnqNkNyLnGSi1wHfsTbGKP5vuMHVsG4rLOBg46gxZu8CjGOwmD1VzprPLBUtPGziwpKuDhPDJi4Q9LdFe65Wq%2B%2FeL1itksLKtvBq7wNdA%3D%3D&trade_no=2021010722001438620501490997&auth_app_id=2016093000633754&version=1.0&app_id=2016093000633754&sign_type=RSA2&seller_id=2088102177995104&timestamp=2021-01-07%2011%3A49%3A46'
      this.$axios.get(`${this.$settings.host}/payment/check/${p}`,{
        headers:{
          'authorization': `jwt ${token}`,
        }
      })
      .then((res)=>{
        this.res_data = res.data.res_data;
      }).catch((error)=>{

      })
    },
    components:{
      Header,
      Footer,
    }
  }
</script>

<style scoped>
.success{
  padding-top: 80px;
}
.main{
    height: 100%;
    padding-top: 25px;
    padding-bottom: 25px;
    margin: 0 auto;
    width: 1200px;
    background: #fff;
}
.main .title{
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 25px 40px;
    border-bottom: 1px solid #f2f2f2;
}
.main .title .success-tips{
    box-sizing: border-box;
}
.title img{
    vertical-align: middle;
    width: 60px;
    height: 60px;
    margin-right: 40px;
}
.title .success-tips{
    box-sizing: border-box;
}
.title .tips1{
    font-size: 22px;
    color: #000;
}
.title .tips2{
    font-size: 16px;
    color: #4a4a4a;
    letter-spacing: 0;
    text-align: center;
    margin-top: 10px;
}
.title .tips2 span{
    color: #ec6730;
}
.order-info{
    padding: 25px 48px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f2f2f2;
}
.order-info p{
  font-family: PingFangSC-Regular;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 10px;
    font-size: 16px;
}
.order-info p b{
  font-weight: 400;
  color: #9d9d9d;
  white-space: nowrap;
}
.wechat-code{
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 25px 40px;
    border-bottom: 1px solid #f2f2f2;
}
.wechat-code>img{
    width: 100px;
    height: 100px;
    margin-right: 15px;
}
.wechat-code p{
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #d0021b;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
}
.wechat-code p>img{
    width: 16px;
    height: 16px;
    margin-right: 10px;
}
.study{
      padding: 25px 40px;
}
.study span{
  display: block;
  width: 140px;
  height: 42px;
  text-align: center;
  line-height: 42px;
  cursor: pointer;
  background: #ffc210;
  border-radius: 6px;
  font-family: PingFangSC-Regular;
  font-size: 16px;
  color: #fff;
}
</style>

